
<template>
  <el-menu
    :default-active="activeIndex"
    router
    :collapse="collapsed"
    collapse-transition
    unique-opened
    class="el-menu-vertical-demo"
    background-color="#334157"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleMenuSelect"
  >
    <div class="logobox">
      <img
        v-if="!collapsed"
        class="logoimg"
        src="../assets/img/logo1.png"
        alt=""
      />
      <img v-else class="logoimg1" src="../assets/img/logo.png" alt="" />
    </div>
    <menu-tree :menuData="menuData" :collapsed="collapsed"></menu-tree>
  </el-menu>
</template>
<script>
import MenuTree from "../components/MenuTree";
export default {
  name: "leftnav",
  components: { MenuTree },
  data() {
    return {
      collapsed: false,
      menuData: [],
      activeIndex: "",
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      menuData: [
        {
          index: "/",
          icon: "li-icon-xiangmuguanli",
          title: "租户",
          id: 1,
          children: [
            {
              index: "ResourceApplication",
              icon: "icon-cat-skuQuery",
              title: "资源申请情况",
              id: 11,
            },
            {
              index: "personalInformation",
              title: "租户信息",
              id: 12,
              icon: "icon-cat-skuQuery",
            },
            {
              index: "databaseInformation",
              title: "数据库信息",
              id: 13,
              icon: "icon-cat-skuQuery",
            },
          ],
        },
        {
          index: "manage",
          icon: "li-icon-dingdanguanli",
          title: "管理员",
          id: 2,
          children: [
            {
              id: 22,
              icon: "icon-order-manage",
              index: "application",
              title: "资源申请单",
            },
            {
              id: 23,
              icon: "icon-order-manage",
              title: "资源申请模板",
              index: "ApplicationTemplate",
            },
            {
              id: 24,
              icon: "icon-order-manage",
              title: "数据资源情况",
              index: "DataResources",
            },
          ],
        },
        {
          id: 3,
          icon: "li-icon-shangchengxitongtubiaozitihuayuanwenjian91",
          title: "监控中心",
          index: "MonitoringCenter",
        },
        {
          id: 4,
          icon: "li-icon-xitongguanli",
          title: "系统管理",
          index: "system",
          children: [
            {
              id: 42,
              icon: "icon-cus-manage",
              title: "用户管理",
              index: "user",
            },
            {
              id: 41,
              icon: "icon-cms-manage",
              title: "菜单管理",
              index: "Module",
            },
            {
              id: 43,
              icon: "icon-news-manage",
              title: "角色管理",
              index: "Role",
            },
            {
              id: 44,
              icon: "icon-cms-manage",
              title: "单位管理",
              index: "dept",
            },
          ],
        },
      ],

      msg: "success",
    };
    this.menuData = res.menuData;

    // menu(localStorage.getItem('logintoken'))
    //   .then(res => {
    //     console.log(JSON.stringify(res))
    //     if (res.success) {
    //       this.allmenu = res.data
    //     } else {
    //       this.$message.error(res.msg)
    //       return false
    //     }
    //   })
    //   .catch(err => {
    //     this.$message.error('菜单加载失败，请稍后再试！')
    //   })
    // 监听
    this.$root.Bus.$on("toggle", (value) => {
      this.collapsed = !value;
    });
  },
  methods:{
    handleMenuSelect(index){
      this.activeIndex = index;
    }
  }
  // methods:{
  //   handleSelect(arg){
  //     console.log(arg);
  //   }
  // }
};
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  /* height: 40px; */
  width: 240px;
}

.logoimg1 {
  height: 40px;
}
</style>